<div id="ps0">
	<div class="personcenterPage clearfix">
	{include file="public/left" /}
	<!-- start -->
		<div class="main_box">
			<div>
				<div class="step_panel">
					<div class="step on">
						1.填写课程信息
					</div>
					<div class="step">
						2.上传课程内容
					</div>
				</div>
			</div>
			<div class="main_cont my-form">
					<div class="form_group">
						<div class="label">
							课程名称
						</div>
						<div class="form_ctl">
							<input type="text" placeholder="请输入课程名称" v-model="courseInfo.course_name" class="form_input">
						</div>
					</div>
					<div class="form_group">
						<div class="label">
							课程分类
						</div>
						<div class="form_ctl">
							<select  v-model="courseInfo.subject_id" id="" class="form_input_min">
								<option value="0">请选择</option>
								<option  v-for="(item,i) in subject" :value="item.id"  ::key="i">{{item.subject_name}}</option>
							</select>
							<!----><!---->
						</div>
					</div>
					<div class="form_group">
						<div class="label">
							课程介绍
						</div>
						<div class="form_ctl">
							<div ref="introduce">
									<!-- introduce -->
							</div>
						</div>
					</div>
					<div class="form_group">
						<div class="label">
							是否免费
						</div>
						<div class="form_ctl form_ctl_radio">
							<input name="is_free" type="radio" value="1" v-model="courseInfo.is_free"><label>免费</label>
							<input name="is_free" type="radio" value="0" v-model="courseInfo.is_free"><label >付费</label>
						</div>
					</div>
					<div class="form_group">
						<div class="label">
							难度
						</div>
						<div class="form_ctl form_ctl_radio">
							<input name="course_level" type="radio" value="1" v-model="courseInfo.course_level"><label for="">基础</label>
							<input name="course_level" type="radio" value="2" v-model="courseInfo.course_level"><label for="">进阶</label>
							<input name="course_level" type="radio" value="3" v-model="courseInfo.course_level"><label for="">提高</label>
						</div>
					</div>
					<!---->
					<div class="form_group">
						<div class="label">
							课程售价
						</div>
						<div class="form_ctl">
							<input type="text" name="original_price"  v-model="courseInfo.original_price" placeholder="请输入价格" class="form_input" style="width:120px;margin-right:10px;"><span>元</span>
						</div>
					</div>
					<div class="form_group">
						<div class="label">
							上传封面
						</div>
						<div class="form_ctl upload_ctl">
							<input type="hidden" name="course_logo" v-model="courseInfo.course_logo"> 
							<div class="preview">
								<img :src="courseInfo.course_logo" alt="" />
							</div>
							<div class="upload_com">
								<button type="button" class="layui-btn layui-btn-primary" id="test1">
								  <i class="layui-icon">&#xe67c;</i>上传图片
								</button>
							</div>
						</div>
					</div>
					<div class="form_group">
						<div class="label">
						</div>
						<div class="form_ctl">
								<button type="button" class="layui-btn layui-btn-my" style="width:200px;" @click="saveInfo();">确认</button>
						</div>
					</div>
			</div>
		</div>
	<!-- end -->
	</div>
</div>
<script type="text/javascript">
window.onload=function(){
	element.on('tab(docDemoTabBrief)', function(data){
	});
}
</script>
<script>
layui.use(['upload','layer'], function(){
  var upload = layui.upload;
  var layer = layui.layer;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,accept:'images'
    ,field:'logo'
    ,url: '{:url("index/upload/cover")}' //上传接口
    ,done: function(res){
      //上传完毕回调
      if(res.code==0){
		$('.preview').html('<img src="'+res.data[0].src+'" alt="">');
		el.$data.courseInfo.course_logo=res.data[0].src;
      }else{
      	layer.msg(res.msg);
      }
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
<script type="text/javascript" src="/static/plug/wangeditor/wangEditor.min.js"></script>
<script>
var el=new Vue({
    el:".main_box",
    data:{
        id:0,
        courseInfo:{introduce:''},
        subject:[]
    },
    methods:{
        // 获取课程信息
        async getCourse(id){
            let {data}=await this.$http.get('course/edit/'+id,{params:{type:1}});
            this.courseInfo=data;
            console.log(this.courseInfo)
            this.editor()
        },
        async getSubject(id){
            let {data}=await this.$http.get('course/edit/'+id,{params:{type:2}});
            this.subject=data;
        },
        editor(){
            var E = window.wangEditor
            var editor = new E(this.$refs.introduce)
            // 或者 var editor = new E( document.getElementById('editor') )
            editor.customConfig.uploadFileName = 'course_introduce';
            editor.customConfig.uploadImgServer = "{:url('index/upload/course')}";
            editor.customConfig.onchange = (html) => {
                this.courseInfo.introduce = html
            }
            // 限制一次最多能传几张图片
            editor.customConfig.uploadImgMaxLength = 1;
            editor.create()
            editor.txt.html(this.courseInfo.introduce);
        },
		// 提交信息
		async saveInfo(){
			// console.log(this.courseInfo);
			for( let i in this.courseInfo){
    			// console.log(i);
				if(!this.courseInfo[i]) {layer.msg('请填写完整');	return;}
			}		
			let {data}=await this.$http.post('course/edit/'+this.courseInfo.id,this.courseInfo);
			if(data.data.code==200){
					layer.msg('编辑成功',function(){
						window.location.href="{:url('/course/index')}";
					})
			}else{
				layer.msg('编辑有误');
			}

		}
    },
    mounted() {
        var id={$id};
        this.id=id;
        this.getCourse(id);
        this.getSubject(id);
    }
})
</script>
   